<template>
  <div>
    <div class="zi">手表</div>
        <div class="five">
            <div class="all" v-for="(v,index) in list" :key="index" @click="watch(index)">
                <img :src="v.src" alt="" class="img1">
                <p>{{v.name}}</p>
            </div>
   </div>
   <div class="zi">手环</div>
  <div class="two">
    <img src="https://hshopb.honorfile.com/pimages/product/6941487204878/428_428_6C5E6B7BACB1C8218D089477B4F33851E84B7DE7B212CB75mp.png" alt="" class="img1">
   <p>荣耀手环6</p>
  </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list:[]
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/watch",
            method:"get"
        }).then(res=>{
            this.list=res.data
        })
    },
    methods: {
        watch(index){
         if (index==0){
            this.$router.push("/mydetails")
         }
        }
    },
}
</script>

<style lang="scss" scoped> 
.img1{
    width: 3.125rem;
}
.all{
    width: 4.1875rem;
    margin: .5rem;
}
p{
    width: 4.1875rem;
    font-size: 12px;
}
.zi{
    width: 16.875rem;
    height: 2.625rem;
    text-align: center;
    line-height:2.625rem ;
    margin-top: 10px;
 
}
.five{
    width: 15.625rem;
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem;
}
.two{
    margin-left: 1.5rem;
}
</style>